<template>
  <div class="flex items-center" :class="[
    record.className.margin,
    record.className.marginTop,
    record.className.marginRight,
    record.className.marginBottom,
    record.className.marginLeft,
    record.className.padding,
    record.className.paddingTop,
    record.className.paddingRight,
    record.className.paddingBottom,
    record.className.paddingLeft,
    record.className.borderWidth,
    record.className.borderStyle,
    record.className.borderColor,
    record.className.borderRadius,
    record.className.backGroundColor,
  ]">
    <a-icon :type="record.className.icon" class="ml-1 mr-3" />
    <div class="w-px h-4 bg-gray-300 mr-1"></div>
    <a-input :type="record.className.type" :placeholder="record.className.placeholder" class="borderStyle" />
  </div>
</template>

<script>
export default {
    props: ["record"],
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
/deep/ .borderStyle{
    border: none;
    background: none;

    &:focus{
        box-shadow: none;
    }
}
</style>